<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        //4
        window.onload = function() {
            new Vue({
                el: '#app',
                data:{
                    message: 'Todo List',
                    //输出
                    Thething:null,
                    incidents:[
                        {thing:'吃饭',done:false},
                        {thing:'睡觉',done:false},
                        {thing:'哈哈哈',done:false}
                    ]
                },
                methods:{
                    addthings: function (){
                        this.incidents.push({thing:this.Thething,done:false});
                    },
                    switchel:function(index){
                        this.incidents[index].done=!this.incidents[index].done;
                    }
                },
                computed:{
                    done:function () {
                        var count = 0;
                        for(var  i=0;i<this.incidents.length;i++){
                            if(this.incidents[index].done){
                                count++;
                            }
                        }
                    }
                }
            })
        }
    </script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="Thething">
    <button v-on:click="addthings">添加</button><br>

    <div v-for="(incident,index) in incidents">
        <input type="checkbox">
        {{index+1}}.<span :class="{del:incident.done}">{{ incident.thing }}</span>
    <!--<td>{{ incident.done }}</td>-->
    </div>
</div>
</body>
</html>